<template>
  <div class="main">
    <div class="select3Wrap">
      <headerBack></headerBack>
      <div class="school-title">{{ schoolNames }}</div>
      <div v-show="dataslens > 0">
        <div class="select3Box">
          <div class="major-wrapper">
            <div class="majors flex-h">
              <div class="left">
                <scroller width="30%">
                  <div class="school" ref="wrapperHeight" :style="styStyle">
                    <div style="height:2rem"></div>
                    <div>
                      <span :class="num1 === index ? 'active1' : ''" v-for="(item, index) in sortdata" :key="index" @click="cli1(index, item)">{{ item }}</span>
                    </div>
                  </div>
                </scroller>
              </div>
              <div class="right flex1">
                <div v-if="povins != '天津'">
                  <div class="majordesc">
                    <span class="titles">
                      包含专业
                    </span>
                    <span class="desc">
                      {{ restrictData ? restrictData.major : '暂无' }}
                    </span>
                  </div>
                  <div class="majordesc">
                    <span class="titles">
                      首选科目要求
                    </span>
                    <span class="desc">
                      {{ restrictData ? restrictData.initial : '暂无' }}
                    </span>
                  </div>
                  <div class="majordesc">
                    <span class="titles">
                      再选科目要求
                    </span>
                    <span class="desc">
                      {{ restrictData ? restrictData.again : '暂无' }}
                    </span>
                  </div>
                </div>
                <div v-else>
                  <div class="majordesc">
                    <span class="titles">
                      选考科目要求
                    </span>
                    <span class="desc">
                      {{ restrictData ? restrictData.initial : '暂无' }}
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-show="dataslens === 0">
        <div class="noDataImage">
          <img src="~/static/nothing/empty_meiyoushuju.png" alt />
          <div class="describe">抱歉，这个页面暂无数据~</div>
        </div>
      </div>
    </div>
    <!-- 结束 -->
  </div>
</template>

<script>
import headerBack from '~/components/headerBack'
import { getDemand, getMajors } from '~/api/selectCourse'
import ls from 'store2'
export default {
  components: {
    headerBack,
  },
  data() {
    return {
      styStyle: '',
      restrictData: {},
      schoolNames: '',
      num1: 0,
      num2: null,
      sortdata: [],
      dataslens: 1,
      povins: '',
    }
  },
  mounted: function() {
    this.schoolNames = decodeURIComponent(this.commonJs.GetUrlParam('schoolName'))
    this.povins = ls.get('userArea')
    this.$visit(this.$route.path + '/' + this.schoolNames)
    this.getMajors()
  },
  methods: {
    getMajors() {
      let obj = {
        nationalCode: this.commonJs.GetUrlParam('schoolCode'),
        province: ls.get('userArea'),
      }
      getMajors(obj)
        .then((res) => {
          if (res.code == '0') {
            this.sortdata = res.data
            this.dataslens = res.data.length
            if (this.dataslens > 0) {
              this.getDemand(this.sortdata[0])
            }

            this.$nextTick(() => {
              let hei = this.$refs.wrapperHeight.offsetHeight * 1 + 200
              this.styStyle = 'height:' + hei + 'px'
            })
          } else {
            this.dataslens = 0
          }
        })
        .finally(() => {})
    },
    getDemand(majorName) {
      // this.$loading('open')
      let obj = {
        major: majorName,
        nationalCode: this.commonJs.GetUrlParam('schoolCode'),
        province: ls.get('userArea'),
      }
      getDemand(obj)
        .then((res) => {
          if (res.code == '0') {
            this.restrictData = res.data
          }
        })
        .finally(() => {
          //  this.$hideLoading()
        })
    },
    cli1(index, items) {
      this.num1 = index
      this.getDemand(items)
      this.num2 = null
    },
  },
}
</script>

<style scoped lang="less">
.major-wrapper {
  width: 100%;
  height: auto;
  .majors {
    align-items: stretch;
    .left {
      width: 30%;
      height: auto;
      min-height: 100vh;
      background: rgba(247, 247, 250, 1);
      span {
        width: 100%;
        height: 1rem;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        font-size: 0.28rem;
        font-family: 'PingFangSC-Regular', PingFangSC;
        font-weight: 400;
        color: rgba(34, 34, 34, 1);
        line-height: 0.4rem;
        background: rgba(247, 247, 250, 1);
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
      .active1 {
        background: #fff;
        color: @mainColor;
      }
    }
    .right {
      padding: 0 0.3rem;
      box-sizing: border-box;
      .majordesc {
        height: auto;
        border-bottom: 0.01rem solid rgba(229, 232, 237, 1);
        padding: 0.3rem 0;

        span {
          display: block;
        }
        .titles {
          font-size: 0.26rem;
          font-weight: 600;
          color: rgba(34, 34, 34, 1);
          line-height: 0.4rem;
        }
        .desc {
          font-size: 0.28rem;
          font-weight: 400;
          color: rgba(0, 0, 0, 1);
          line-height: 0.4rem;
          margin-top: 0.1rem;
        }
      }
    }
  }
}
.select3Wrap {
  width: 7.5rem;
  background: #fff;
  overflow: hidden;
  padding-bottom: 0.5rem;
  min-height: 100vh;
  .select3Box {
    width: 100%;
    min-height: 5rem;
    height: auto;
  }
  .school-title {
    padding: 0.32rem 0.3rem;
    box-sizing: border-box;
    font-size: 0.3rem;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: rgba(0, 0, 0, 1);
    border-bottom: solid 1px rgba(229, 232, 237, 1);
    z-index: 10;
    position: relative;
    background: #fff;
  }
  .noDataImage {
    padding-top: 0;
    text-align: center;
    margin-top: 1rem;
    img {
      width: 2.4rem;
      height: 2.4rem;
      margin-bottom: 0.24rem;
    }
    .describe {
      color: #999;
      font-size: 0.28rem;
      line-height: 0.4rem;
    }
  }
}
</style>
